<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/vue.min.js"></script>
</head>
<style type="text/css">
    .hide{
        display: none;
    }
    /**复选框样式**/
    .chec-one input[type=checkbox]:checked + label {
        opacity: 1;
        background: #0081CC;
        border: 1px solid #0081CC;
    }
    .chec-one input[type=checkbox]:checked + label:after {
        opacity: 1;
    }
    .chec-one{
        position:relative;
        display: inline-block;
        width:18px;
        height:18px;
        vertical-align: middle;
    }
    .chec-one label:after {
        opacity: 0;
        content: '';
        position: absolute;
        width: 7px;
        height: 4px;
        background: transparent;
        top: 4px;
        left: 4px;
        border: 2px solid #fff;
        border-top: none;
        border-right: none;

        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .chec-one label {
        cursor: pointer;
        position: absolute;
        width: 16px;
        height: 16px;
        top: 0;
        left: 0;
        border-radius: 100%;
        border: 1px solid #CCCCCC;
    }
</style>
<body>
    <div id="input-box">
        <div class="chec-one">
        <input type="checkbox"  id="four" name="" class="hide" v-model="inputValue"/>
        <label for="four" @click="test();"></label>
    </div>
    </div>
</body>
</html>
<script>
    $(function(){
        var vm = new Vue({
            el:"#input-box",
            data:{
                inputValue:false
            },
            methods:{
                test:function(){
                    console.log(vm.inputValue);
                }
            }
        });
    });
</script>